<template>
  <div class="confirmOrder">
    <header>
      <div class="left" @click="$router.back()"></div>
      <p>确认订单</p>
    </header>

    <div class="address_box" v-if="address">
      <div class="logo">
        <img
          src="	http://www.hlamall.cn/img/mobile-site/gobal/addressLogo.jpg"
          alt=""
        />
      </div>
      <div class="text">
        <div class="top">
          <div class="name">收货人：{{ address.name }}</div>
          <div class="tel">{{ address.tel }}</div>
        </div>
        <div class="address">
          收货地址：{{
            address.province +
            address.city +
            address.county +
            address.addressDetail
          }}
        </div>
        <div class="tips">(收货不便时，可选择免费代收货服务)</div>
      </div>
      <div class="right">
        <img
          src="	http://www.hlamall.cn/img/mobile-site/balance/addressR.jpg"
          alt=""
        />
      </div>
    </div>

    <div class="address_line"></div>

    <!-- 支付方式 -->
    <div class="pay_method">
      <div class="item" v-for="(vl, i) in pay_method_list" :key="i">
        <div class="left">
          <div class="img">
            <img :src="vl.imgUrl" alt="" />
          </div>
          <div class="title">{{ vl.title }}</div>
        </div>
        <div
          :class="['toggle', { con: i == pay_method_id }]"
          @click="pay_method_id = i"
        >
          <img src="" alt="" />
        </div>
      </div>
    </div>

    <!-- 订单内容 -->
    <div class="order" v-if="orderInfo">
      <div class="content" v-for="(vl, i) in orderInfo" :key="i">
        <div class="img">
          <img :src="vl.imgUrl" alt="" />
        </div>
        <div class="text">
          <div class="title"></div>
          <div class="price">￥{{ vl.price }}.00</div>
          <div class="bottom">
            <div class="type">尺码：{{ vl.size }} 颜色分类：{{ vl.type }}</div>
            <div class="num">X{{ vl.num }}</div>
          </div>
        </div>
      </div>

      <ul>
        <li>
          <div class="title">现金券</div>
          <div class="type">不使用现金券 ></div>
        </li>
        <li>
          <div class="title">抵扣券</div>
          <div class="type">不使用抵扣券 ></div>
        </li>
        <li>
          <div class="title">配送方式</div>
          <div class="type">快递配送</div>
        </li>
        <li class="message">
          <div class="title">卖家留言</div>
          <textarea placeholder="选填、50字以内" maxlength="100px"></textarea>
        </li>
        <li class="all">
          共{{ allNum }}件商品，小计：
          <span> {{ allPrice }}.00元</span>
        </li>
      </ul>
    </div>

    <!-- 底部按钮 -->
    <div class="bottom_bar" v-if="orderInfo">
      <div class="all">
        合计：<span>{{ allPrice }}.00</span>
      </div>
      <div class="btn" @click="pay">去支付</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pay_method_list: [
        {
          title: "微信支付",
          imgUrl: "http://www.hlamall.cn/img/mobile-site/gobal/pay_wx.jpg",
        },
        {
          title: "支付宝支付",
          imgUrl: "http://www.hlamall.cn/img/mobile-site/gobal/pay_zfb.jpg",
        },
      ],
      pay_method_id: 0,
      userInfo: null, //用户数据
      shopList: null, //商品数据
      address: null, //用户地址
      orderInfo: [], //获取将要渲染的订单信息
      userOrder: null, //获取用户订单信息
      allPrice: 0, //订单总价
      allNum: 0, //订单商品总数
    };
  },
  methods: {
    //   获取用户数据
    getUserInfoFun() {
      let user = localStorage.getItem("HL_user");
      this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
      this.address = this.userInfo[user].address.filter(
        (vl) => vl.isDefault
      )[0];
      this.userOrder = this.userInfo[user].order;
    },
    // 获取商品数据
    getShopInfoFun() {
      this.shopList = JSON.parse(sessionStorage.getItem("shopList"));
      let query = JSON.parse(this.$route.query.infoList);

      query.forEach((vl) => {
        let id = vl.id;
        let index = this.shopList.findIndex((vl) => vl.id == id);
        let imgUrl = this.shopList[index].imgUrl;
        let title = this.shopList[index].title;
        let price = this.shopList[index].price;
        let size = vl.size;
        let type = vl.type;
        let num = vl.num;
        this.allPrice += num * price;
        this.allNum += num;

        this.orderInfo.push({
          id,
          num,
          title,
          imgUrl,
          price,
          size,
          type,
        });
      });
    },
    // 修改数据
    setItem(item, newItem) {
      sessionStorage.setItem(item, JSON.stringify(newItem));
    },
    // 支付
    pay() {
      let pay_method = this.pay_method_list[this.pay_method_id].title;
      let allNum = this.allNum;
      let allPrice = this.allPrice;

      let item = [];
      let query = JSON.parse(this.$route.query.infoList);
      query.forEach((vl) => {
        let id = vl.id;
        let index = this.shopList.findIndex((vl) => vl.id == id);
        let imgUrl = this.shopList[index].imgUrl;
        let title = this.shopList[index].title;
        let price = this.shopList[index].price;
        let size = vl.size;
        let type = vl.type;
        let num = vl.num;

        item.push({
          imgUrl,
          num,
          price,
          size,
          title,
          type,
        });
      });

      let order_code = "HLA" + parseInt(Math.random() * 100000000000000000);
      let new_order = {
        allNum,
        allPrice,
        item,
        order_code,
        order_type: "待发货",
        pay_method,
        address: this.address,
      };

      let user = localStorage.getItem("HL_user");
      this.userInfo[user].order.unshift(new_order);
      this.setItem("userInfo", this.userInfo);
      this.$toast({
        message: "已支付",
        position: "bottom",
      });
      this.$router.push("/My");
    },
  },
  created() {
    this.$emit("hide");
    this.getUserInfoFun();
    this.getShopInfoFun();
  },
};
</script>

<style lang="scss" scoped>
.confirmOrder {
  min-height: 100%;
  background: #f9f9f9;

  > .address_box {
    background: #fff;
    padding: 15px 15px 30px 10px;
    display: flex;

    > .logo {
      width: 14px;
      height: 20px;
      align-self: center;
      margin-left: 5px;
      margin-right: 10px;

      > img {
        width: 100%;
      }
    }

    > .text {
      flex: 1;

      > .top {
        display: flex;
        justify-content: space-between;

        > .name {
          font-size: 14px;
          line-height: 14px;
          margin-bottom: 12px;
        }

        > .tel {
          font-size: 10px;
          color: #b40510;
        }
      }

      > .address {
        font-size: 11px;
        line-height: 11px;
        margin-bottom: 12px;
      }

      > .tips {
        font-size: 11px;
        line-height: 11px;
        color: #999;
      }
    }

    > .right {
      width: 10px;
      height: 17px;
      align-self: center;
      margin-left: 20px;

      > img {
        width: 100%;
      }
    }
  }

  > .address_line {
    width: 100%;
    height: 6px;
    background: url(http://www.hlamall.cn/img/mobile-site/balance/line.jpg);
    background-size: contain;
  }

  > .pay_method {
    padding: 0px 10px;
    background: #fff;
    margin: 10px 0;

    > .item {
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;

      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #f0f0f0;
        transform: scaleY(0.5);
      }

      .left {
        display: flex;
        align-items: center;

        > .img {
          width: 24px;
          height: 24px;
          margin-left: 4px;
          margin-right: 10px;

          > img {
            width: 100%;
          }
        }

        > .title {
          font-size: 12px;
          line-height: 12px;
        }
      }

      > .toggle {
        justify-self: center;
        width: 17px;
        height: 17px;
        background: url(http://www.hlamall.cn/img/mobile-site/shopingCart/pay-state.png)
          no-repeat -17px 0;
        background-size: cover;

        &.con {
          background-position: 0 0;
        }
      }
    }
  }

  > .order {
    border-top: 1px solid #ccc;
    background: #fff;
    padding: 10px 0 100px;

    > .content {
      display: flex;
      padding: 4px 15px;
      background: #f9f9f9;
      margin-bottom: 10px;
      border-top: 1px solid #e0e0e0;
      border-bottom: 1px solid #e0e0e0;

      > .img {
        width: 80px;
        height: 80px;
        margin-right: 10px;

        > img {
          width: 100%;
        }
      }

      > .text {
        flex: 1;

        > .title {
          margin-bottom: 10px;
        }

        > .price {
          color: #b40510;
          font-size: 11px;
        }

        > .bottom {
          font-size: 11px;
          display: flex;
          justify-content: space-between;

          > .type {
            color: #666;
          }
        }
      }
    }

    > ul {
      padding: 0 15px;
      background: #fff;

      > li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 36px;
        position: relative;

        > .type {
          color: #a6a6a6;
        }

        &::after {
          content: "";
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 1px;
          background: #f0f0f0;
          transform: scaleY(0.5);
        }

        &.message {
          height: unset;
          padding-top: 10px;
          align-items: start;

          > textarea {
            flex: 1;
            margin-left: 20px;
            border: 0;
            height: 50px;
          }
        }

        &.all {
          justify-content: flex-end;

          > span {
            color: #cb211c;
          }
        }
      }
    }
  }

  > .bottom_bar {
    position: fixed;
    box-sizing: border-box;
    bottom: 0;
    width: 100%;
    background: #f9f9f9;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 15px;

    > .all {
      > span {
        color: #cb211c;
      }
    }

    > .btn {
      width: 88px;
      line-height: 38px;
      text-align: center;
      height: 100%;
      color: #fff;
      background: #b7090a;
    }
  }
}
</style>